<template>
  <div>
    <todo-header></todo-header>

    <todo-input @add="addTodoItem"></todo-input>

    <todo-list :todos="todos"></todo-list>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
// import bus from './utils/bus'

// 初始化几个待办事项
const initTodos = Array(6).fill(null).map((v, i) => ({
  id: i + 1,
  title: '待办事项' + (i + 1),
  completed: false
}))

// 用于保存全局 id
let index = initTodos.length

export default {
  name: 'App',
  data() {
    return {
      todos: initTodos
    }
  },
  components: {
    TodoHeader,
    TodoInput,
    TodoList
  },

  // 在实例创建后会被自动调用到
  created() {
    // 注册事件监听，接收待修改/待删除待办事项的数据
    // bus.$on('toggle', this.toggleTodoItem)
    // bus.$on('remove', this.removeTodoItem)
    this.$bus.$on('toggle', this.toggleTodoItem)
    this.$bus.$on('remove', this.removeTodoItem)
  },
  methods: {
    /**
     * 添加待办事项
     */
    addTodoItem(title) {
      this.todos.push({
        id: ++index,
        title,
        completed: false
      })
    },
    /**
         * 删除待办事项
         */
    removeTodoItem(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    },
    /**
         * 修改待办事项的状态
         */
    toggleTodoItem(id) {
      // 从数组中找出 id 对应的项
      const todo = this.todos.find(todo => todo.id === id)
      // 修改完成状态
      todo.completed = !todo.completed
    }
  }
}
</script>

<style lang="scss">
</style>
